
{% extends 'commonTmp.html' %}


{% block main %}

 <!--====================================================================
            Start Banner Section
        =====================================================================-->
        <section class="banner-section" style="background-image:url({% static 'assets/img/banner.png' %});">
            <div class="container">
                <div class="banner-inner text-center">
                    <h2 class="page-title">你的购物车</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{% url 'index' %}">首页</a></li>
                            <li class="breadcrumb-item active" aria-current="page"><a href="{% url 'shop' 1 1 %}">商品</a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </section>
        <!--====================================================================
            End Banner Section
        =====================================================================-->


        <!--====================================================================
           Start Cart Page
       =====================================================================-->
        <section class="cart-page mt-120 rmt-80 mb-120 rmb-80">
            <div class="container">
                <div class="row col-gap-60">

                    <div class="col-xl-8">
                        <div class="cart-total-product rmb-80 b1 br-5 p-50">
                            <h4 class="cart-heading">购物车清单</h4>
                            <div class="cart-title d-none d-md-flex">
                                <h5 class="product-title">商品名称</h5>
                                <h5 class="quantity-title">购买数量</h5>
                                <h5 class="price-title">单价</h5>
                                <h5 class="total-title">小计</h5>
                            </div>
                            <div class="cart-items pb-15">
                               {% for item in cart_goods_lists %}
                                <div class="cart-single-item">
                                    <a href="{% url 'cart_delete' item.0.id %}" type="button" class="close"><i class="flaticon-cross"></i></a>
                                    <div class="product-img">
                                        <img src="{%static 'assets/img/goods/' %}{{item.0.goods_img}} " alt="Product Image">
                                    </div>
                                    <h6 class="product-name">{{item.0.goods_name}}</h6>
                                    <div class="number-input">
                                     <a href="{%  url 'change_one' item.0.id  item.num|add:-1 %}" style="font-size: 2em">-</a>
                                      <input class="quantity" min="1" name="quantity" value="{{item.num}}" type="number"
                                             readonly="readonly">

                                      <a href="{%  url 'change_one' item.0.id  item.num|add:1 %}" style="font-size: 2em">+</a>
                                      </button>
                                    </div>
                                    <h6 class="product-price">{{item.0.goods_price}}</h6>

                                    <h6 class="product-total-price">{% widthratio item.num 1  item.0.goods_price %}</h6>
                                </div>
                                {% endfor %}
                            </div>

                            <div class="row text-center text-lg-left">
                                <div class="col-lg-5">
                                    <div class="continue-shopping">
                                        <a href="{% url 'cart_clear' %}" class="theme-btn no-shadow bg-danger br-5" type="submit">全部清空</a>
                                    </div>
                                </div>
<!--                                <div class="col-lg-7">-->
<!--                                    <div class="update-shopping text-lg-right">-->
<!--                                        <a href="#" class="theme-btn no-shadow style-two br-10 rmt-30">更新</a>-->
<!--                                    </div>-->
<!--                                </div>-->
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4">
                        <div class="cart-total-price p-50">
                            <h4 class="cart-heading">订单详情</h4>
                            <div class="total-item-wrap">
                                <div class="total-item sub-total">
                                    <span class="title">商品总数 {{total_nums}}</span>
                                    <span class="price">{{before_discount}}</span>
                                </div>
                                <div class="total-item shipping">
                                    <span class="title">运费</span>
                                    <span class="price">{{freight}}</span>
                                </div>

                                <div class="total-item discount">
                                    <span class="title">折扣</span>
                                    <span class="price">{{discount}}</span>
                                </div>
                                <div class="total-item total">
                                    <span class="title mb-0">应付金额</span>
                                    <span class="price mb-0">{{total_money}}</span>
                                </div>
                            </div>
                            <div class="proceed-btn mt-30">
                                <a href="{% url 'order' %}" class="theme-btn w-100 text-center br-10">生成订单</a>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
        </section>
        <!--====================================================================
           End Cart Page
       =====================================================================-->
 {% endblock %}